<template>
    <div ref="gantt" style="height: 400px"></div>
</template>

<script>
    import {Message} from 'element-ui'
  import {gantt} from 'dhtmlx-gantt';
  export default {
    name: 'gantt',
    props: {
      showWitch:Boolean,
      tasks: {
        type: Object,
        default () {
          return {data: [], links: []}
        }
      },
      dom: String
    },
    created () {
      gantt.clearAll() // 先清空，再添加，就不会有缓存
    },
    mounted(){
      this.settingGanttConfig();
      //显示年份
      gantt.config.subscales=[
        {
          unit:'year',
          step:1,
          date:'%Y'
        }
      ];
      gantt.config.xml_date = "%Y-%m-%d";
      gantt.attachEvent('onTaskSelected', (id) => {
        let task = gantt.getTask(id);
        this.$emit('task-selected', task);
      });
      gantt.attachEvent('onTaskIdChange', (id, new_id) => {
        if (gantt.getSelectedId() == new_id) {
          let task = gantt.getTask(new_id);
          this.$emit('task-selected', task);
        }
      });
      gantt.attachEvent("onBeforeTaskMove", (id, parent, tindex) => {
        if (tindex!==null){
          console.log(id);
          console.log(tindex+1);
          let task = gantt.getTask(id);
          task.tindex=tindex+1;
          this.$emit('changeSort', task);
        }
      });
      gantt.init(this.$refs.gantt);
      gantt.createDataProcessor((entity, action, data, id) => {
        this.$emit(`${entity}-updated`, id, action, data);
      });
      gantt.parse(this.$props.tasks);

    },
    methods:{
      //配置甘特图Config
      settingGanttConfig() {
        console.log(this.showWitch);
        gantt.config.sort = true;
        //设置按行渲染甘特图提交效率
        gantt.config.show_task_cells = true;
        //设置不可以拖动进度
        gantt.config.drag_progress = true;
        //设置Task不可以拖动
        gantt.config.drag_move = false;
        //设置不可以拖动关系
        gantt.config.drag_links = true;
        //设置不可拖动Task 大小
        gantt.config.drag_resize = true;
        //单击显示添加详情
        gantt.config.details_on_create = true;
        //双击显示明细
        gantt.config.details_on_dblclick = true;

        if (this.showWitch){
          gantt.config.order_branch = true;
        gantt.config.order_branch = "marker";
        }else {
          gantt.config.order_branch = false;
        }

        gantt.config.show_links = false;



        gantt.config.columns=[
          {name:"text",     resize:"true",  label:"名称",  tree:true, width:'*' },
          {name:"start_date", label:"开始时间", align: "center" },
          {name:"duration",   label:"工期",   align: "center" },
          {name:"add",      width:0,   label:"", tree:true,}
        ];

      },
      },
  }
</script>

<style>
    .gantt_tree_icon.gantt_blank{
        width: 30px!important;
    }
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>